<template>
  <div class="chat-setting">
    <cell-group :border-top="false">
      <cell
      :title="userInfo.name"
      :label="userInfo.fit"
      :image="userInfo.image">
      </cell>
    </cell-group>
    <ec-line :height="1"></ec-line>
    <cell-group>
      <cell
      title="账号"
      :date="account">
      </cell>
      <cell
      title="昵称"
      :date="userInfo.name">
      </cell>
    </cell-group>
    <ec-line :height="1.2"></ec-line>
    <button-group ghost>
      <ec-button 
        text="退出登录" 
        @click.native="thisOutLogin">
      </ec-button>
    </button-group>
  </div>
</template>

<script>
import {
  mapActions,
  mapState
} from 'vuex';

// custom components
import Cell from '@/components/Cell';
import CellGroup from '@/components/CellGroup';
import Line from '@/components/Line';
import ButtonGroup from '@/components/ButtonGroup';
import Button from '@/components/Button';

// chat api
import {
  outLogin
} from '@/api/chat';

export default {
  name: 'chat-setting',
  data() {
    return {
    };
  },
  components: {
    CellGroup,
    Cell,
    EcLine: Line,
    ButtonGroup,
    EcButton: Button
  },
  created() {
    this.getSettingInfo();
  },
  computed: {
    ...mapState('chat/settingInfo', [
      'userInfo',
      'account'
    ])
  },
  methods: {
    ...mapActions('chat/bottomNavigator', [
      'activateChatFooterName',
      'showBottomNav'
    ]),
    ...mapActions('chat/messageBottomInput', [
      'showMessageInput'
    ]),
    ...mapActions('chat/settingInfo', [
      'getSettingInfo'
    ]),
    thisOutLogin() {
      outLogin({
        router: this.$router
      });
    }
  },
  activated() {
    this.activateChatFooterName('setting');
    this.showMessageInput(false);
    this.showBottomNav(true);
  }
};
</script>


<style lang="scss">

</style>
